<template>
  <div class="app-container">
    <el-row style="text-align: center;">
      <el-col>
        <span
          style="display: inline-block; height: 50px; line-height: 50px; vertical-align: middle; margin-left: 10px; font-size: 28px;font-weight: bold;">
          画质评价模块
        </span>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- Grid layout with 3 columns per row -->
    <!-- <el-button type="text" @click="getNavigator">点击按钮</el-button>授予摄像头权限查看页面效果 -->
    <el-form ref="form" :model="form" label-width="130px">
      <el-form-item label="画质评价算法选择">
        <el-radio-group v-model="arithmetic" @input="handleRadioChange">
          <el-radio-button label="HH-IQA1"></el-radio-button>
          <el-radio-button label="HH-IQA2"></el-radio-button>
          <el-radio-button label="HH-IQA3"></el-radio-button>
          <el-radio-button label="HH-IQA4"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 算法介绍展示区域 -->
      <el-form-item label="算法介绍">
        <el-card>
          <p>{{ selectedDescription }}</p>
        </el-card>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div class="grid-container">
      <!-- Loop to generate 6 el-card components -->
      <el-card class="box-card" v-for="(item, index) in 6" :key="index">
        <div slot="header" class="clearfix" style="text-align: center;font-weight: bold;">
          <span>监控视频点位{{ index + 1 }}</span>
          <el-tag v-if="isOnline" type="success" style="float: right;">在线</el-tag>
          <el-tag v-else type="danger" style="float: right;">离线</el-tag>
        </div>
        <div class="text item">
          <div>
            <video v-if="hasCamera" ref="videos" autoplay playsinline muted class="video-feed"></video>
            <!-- Message to display if no camera is available -->
            <el-image v-else style="width: 100%; height: 100%" :src="altImg" fit="fit"></el-image>
          </div>
        </div>
        <div class="score">画质分数：{{ scores[index] }}</div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pic",
  data() {
    return {
      arithmetic: 'HH-IQA1', // 默认选中的算法
      algorithmDescriptions: {
        'HH-IQA1': 'HH-IQA1 是一种基于人眼视觉模型的画质评价算法，能够有效评估图像的清晰度和对比度。',
        'HH-IQA2': 'HH-IQA2 采用了机器学习技术，对图像质量进行主观和客观的综合评价。',
        'HH-IQA3': 'HH-IQA3 主要用于实时监控，具有高效、准确的特点，适用于大规模视频流分析。',
        'HH-IQA4': 'HH-IQA4 在低照度环境下有显著优势，能够保持良好的画质评价效果。',
      },
      selectedDescription: '',
      isOnline: true,
      hasCamera: false,
      // Initialize scores array with default values
      scores: [0, 0, 0, 0, 0, 0],
      form: {},
      arithmetic: "HH-IQA1",
      altImg: process.env.VUE_APP_BASE_API + '/profile/images/dataaccess/a1.png',
    };
  },
  mounted() {
    this.selectedDescription = this.algorithmDescriptions[this.arithmetic];
  },
  methods: {
    getNavigator() {
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then((stream) => {
          this.hasCamera = true;
          // Wait for the DOM to update
          this.$nextTick(() => {
            // Assign the camera stream to each video element
            this.$refs.videos.forEach((video) => {
              video.srcObject = stream;
            });
          });
        })
        .catch((error) => {
          console.error("Error accessing camera:", error);
          this.hasCamera = false;
        });
    },
    handleRadioChange(value) {
      this.selectedDescription = this.algorithmDescriptions[value];
      if (value === 'HH-IQA1') {
        this.arithmetic = 'HH-IQA1'
        this.scores = [50, 60, 70, 80, 90, 100]
      } else if (value === 'HH-IQA2') {
        this.arithmetic = 'HH-IQA2'
        this.scores = [40, 60, 30, 20, 90, 10]
      } else if (value === 'HH-IQA3') {
        this.arithmetic = 'HH-IQA3'
        this.scores = [51, 22, 43, 11, 23, 33]
      } else if (value === 'HH-IQA4') {
        this.arithmetic = 'HH-IQA4'
        this.scores = [1, 2, 3, 4, 5, 7]
      }
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.box-card {
  width: 33.3333%;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.video-feed {
  width: 100%;
  height: auto;
}

.score {
  color: #ff0000;
  height: 20px;
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}
</style>
